<template>
  <div id="set-err-msg">
    <div class="bg-color-w">
      <p class="form-title">模块基本信息</p>
      <el-form v-model="Data" :label-position="'right'" label-width="160px">
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="服务环境编号:">
              <el-input v-model="Data.moduleCode" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :push="2" :span="10">
            <el-form-item label="服务模块名称:">
              <el-input v-model="Data.moduleName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :push="2" :span="10">
            <el-form-item label="所属网关环境:">
              <el-input v-model="Data.gwEnvName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bg-color-w mar-t-10">
      <p class="form-title">
        报文头定义-异常信息
        <span class="form-title-btn">
          <el-button type="primary" size="mini" @click="openErrorDiaglog('add')">新增</el-button>
        </span>
      </p>
      <el-table :data="errorData.list" ref="table">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="errorCode" label="错误代码"></el-table-column>
        <el-table-column prop="errorDesc" label="描述"></el-table-column>
        <el-table-column prop="errorMsg" label="解决方案"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openErrorDiaglog('edit',scope.row)">编辑</el-button>
            <el-button type="text" size="mini" @click="removeError(scope.row.errorId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增/修改 错误信息 弹窗 -->
    <el-dialog :title="errorDialogTitle" :visible.sync="errorDialogVisible" @close="errorDialogClose" width="900px">
      <el-form :model="errorPostData" ref="errorPostForm" :rules="errorPostRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="错误代码" :label-width="formLabelWidth" prop="errorCode">
              <el-input v-model="errorPostData.errorCode" placeholder="请输入错误代码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" :label-width="formLabelWidth" prop="errorMsg">
              <el-input v-model="errorPostData.errorMsg" placeholder="请输入描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="解决方案" :label-width="formLabelWidth" prop="errorDesc">
              <el-input v-model="errorPostData.errorDesc" placeholder="请输入解决方案"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialogbtn">
          <el-button @click="errorDialogReset()">重置</el-button>
          <el-button @click="errorDialogClose()">关闭</el-button>
          <el-button type="primary" @click="errorDialogSubmit()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script type='text/ecmascript-6'>
  import ajax from '../../../../../api/ajax/ajax'
  import api from '../../../../../api/url'
  export default {
    name: 'set-err-msg',
    props: {
      Data: {},
      messages: {}
    },
    watch: {
      Data () {
        this.getListInterfaceLinkError()
      }
    },
    data () {
      return {
        errorData: {},
        errorPostData: {},
        errorPostRules: {
          errorCode: [
            {required: true, trigger: 'blur', message: '错误代码不能为空'}
          ],
          errorMsg: [
            {required: true, trigger: 'blur', message: '描述不能为空'}
          ],
          errorDesc: [
            {required: true, trigger: 'blur', message: '解决方案不能为空'}
          ]
        },
        errorPostDataCache: {},
        rowCache: {},
        formLabelWidth: '140px',
        errorDialogTitle: '',
        errorDialogVisible: false,
        ierror: null
      }
    },
    methods: {
      // 获取错误信息列表
      getListInterfaceLinkError () {
        ajax.post(api.LISTMODULELINKERROR, {moduleId: this.Data.moduleId}, true).then(res => {
          this.errorData = res
        }).catch(res => {
          this.$message({
            showClose: true,
            message: res.errorMsg,
            type: 'warning'
          })
        })
      },
      openErrorDiaglog (e, row) {
        if (e === 'add') {
          this.errorDialogTitle = '新增异常信息'
          this.ierror = true
        } else {
          this.rowCache = row
          this.errorDialogTitle = '修改异常信息'
          this.ierror = false
          this.errorPostData = {
            createTime: row.createTime,
            errorCode: row.errorCode,
            errorDesc: row.errorDesc,
            errorId: row.errorId,
            errorMsg: row.errorMsg,
            lastedTime: row.lastedTime,
            linkId: row.linkId,
            linkType: row.linkType
          }
        }
        this.errorPostDataCache.errorCode = this.errorPostData.errorCode || ''
        this.errorPostDataCache.errorDesc = this.errorPostData.errorDesc || ''
        this.errorPostDataCache.errorMsg = this.errorPostData.errorMsg || ''
        this.errorDialogVisible = true
      },
      // 错误信息弹窗 确定
      errorDialogSubmit () {
        // 校验
        this.$refs['errorPostForm'].validate((valid) => {
          if (valid) {
            let port, msg
            port = api.ADDMODULELINKERROR
            this.errorData.moduleId = this.Data.moduleId
            if (this.ierror) {
              msg = '新增成功'
              this.errorData.list.push(this.errorPostData)
            } else {
              var that = this
              Object.keys(this.errorPostData).forEach(function (key) {
                that.rowCache[key] = that.errorPostData[key]
              })
              msg = '修改成功'
            }
            ajax.post(port, this.errorData, true).then(res => {
              if (res.createTime || res === 'success') {
                this.$message({
                  message: msg,
                  type: 'success'
                })
                this.errorDialogVisible = false
                this.errorPostData = {}
                this.getListInterfaceLinkError()
              }
            }).catch(res => {
              this.$message({
                showClose: true,
                message: res.errorMsg,
                type: 'warning'
              })
              this.getListInterfaceLinkError()
            })
          } else {
            return false
          }
        })
        // 校验结束
      },
      // 错误信息弹窗 关闭
      errorDialogClose () {
        this.errorDialogVisible = false
        // if (!this.ierror) {
        this.errorPostData = {}
        this.errorPostDataCache = {}
        this.$refs['errorPostForm'].resetFields()
        this.getListInterfaceLinkError()
        // }
        this.ierror = null
      },
      // 错误信息弹窗 重置
      errorDialogReset () {
        this.$refs['errorPostForm'].resetFields()
          if (this.ierror) {
          this.errorPostData = {}
          } else {
            this.errorPostData.errorCode = this.errorPostDataCache.errorCode
            this.errorPostData.errorDesc = this.errorPostDataCache.errorDesc
            this.errorPostData.errorMsg = this.errorPostDataCache.errorMsg
          }
        /* if (this.ierror) {
          this.$refs['errorPostForm'].resetFields()
        } */
      },
      // 删除错误信息
      removeError (e) {
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax.post(api.REMOVELINKERROR, {errorId: e}, true).then(res => {
            if (res === 'success') {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getListInterfaceLinkError()
            }
          }).catch(res => {
            this.$message({
              showClose: true,
              message: res.errorMsg,
              type: 'warning'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    mounted () {
      this.getListInterfaceLinkError()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #set-err-msg
    .bg-color-w
      background-color white
    .mar-t-10
      margin-top 10px
    .form-title
      padding 10px
      .form-title-btn
        float right
</style>
